<template>
    <el-card shadow="never">
    <div class="mine-main-container">
        <div class="avatar-container" style="background-image: url(&quot;https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1&quot;);"></div>
        <p class="avatar-tip">点击更换</p>
        <!--  ref="form" :rules="rules" -->
        <el-form :model="editForm"  label-width="80px" :inline="true" label-position="left" class="main-form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名:" size="small">
                        <el-input v-model="editForm.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="生日：" size="small">
                    <el-date-picker
                    v-model="editForm.birthday"
                    type="date"
                    placeholder="Pick a date"
                    style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-form-item label="性别">
                    <el-radio-group v-model="editForm.radio1" size="large" fill="#f93684">
                    <el-radio-button label="男" style="margin-right:10px;" />
                    <el-radio-button label="女" />
                    </el-radio-group>
                </el-form-item>
                </el-col>
                <!-- 这里报警告 -->
                <e-col :span="12">
                    <el-form-item label="资源类型:">
                        <el-select v-model="editForm.cities" size="small" placeholder="请选择">
                            <el-option v-for="item in resourceList"  :label="item.label" :value="item.value" :key="item.value"/>
                        </el-select>
                    </el-form-item>
                </e-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-form-item label="成长等级:">
                    <span class="level_box medium" style="transform: translateY(3px);"><i class="lv"></i><i class="lv2"></i></span>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="技能水平:">
                    <el-select v-model="editForm.skill">
                        <el-option
                        v-for="item in resourceList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        <span style="float: left">{{ item.label }}</span>
                        <span
                            style="
                            float: right;
                            color: #ddd;
                            font-size: 13px;
                            "
                            >直辖市</span
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="兴趣技能:">
                <div class="short_toggle_container placeholder_state" @click="dialogVisible = true" >
                    <div>请选择</div>
                </div>
            </el-form-item>
        </el-form>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" width="50%" :lock-scroll="true">
            <template #header>
                <div class="el-dialog__header">
                    <div><em class="title" style="font-style: normal;font-size: 18px;">选择我的兴趣技能</em><span style="font-style: normal;font-size: 18px; color: #b1b5c1" class="counts">1&nbsp;/&nbsp;7</span></div>
                    <p class="title-memo" style="color: #b1b5c1;margin: 6px 0 0;font-size: 14px;">例如舞蹈就选舞种</p>
                </div>       
 
            </template>
            <!-- 主体 -->
                    <!-- :model="form" ref="form" :rules="rules"  -->
                  <div>
                    <el-form :inline="false">
                        <el-form-item>
                            <el-input size="small" prefix-icon="Search" placeholder="搜索兴趣技能" style="width:30%;height:40px ;margin-right:12px;"></el-input>
                            <button class="add_btn" type="text" style="color: #7d8090;width: 60px;height: 40px;text-align: center;font-size: 14px;border-style:none;">搜索</button>
                        </el-form-item>
                        <!-- 添加显示 -->
                        <div class="choosed">
                            <div>
                                <div title="手势舞" class="tag-item selected notClick">
                                    <span>手势舞</span>
                                    <el-icon class="toggle-interest-icon" :size="28" color="#bbb"><CircleCloseFilled /></el-icon>
                                </div>
                            </div>
                        </div>
                        <div>
                            <p class="sub-title">推荐兴趣技能</p>
                            <div class="recommendList" style="height:300px;">
                                <el-scrollbar height="300px" style="margin-bottom: -17px;">
                                    <div style="padding-top: 10px;" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
                                        <div title="中国舞" class="tag-item" v-for="item in editList01" :key="item.id">{{item.name}}</div>
                                        <p v-if="loading" style="text-align:center; margin-bottom: 20px;">Loading...</p>
                                        <!-- <p>Loading...1</p> -->
                                        
                                    </div>
                                </el-scrollbar>
                            </div>
                        </div>
                        <!-- <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item> -->
                    </el-form>
                  </div>
            <template #footer>
            <span>
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible=false">OK</el-button>
            </span>
            </template>
        </el-dialog> 
   
        </div> 
    </el-card>
    
</template>

<script setup>
import { ref,computed,onMounted } from 'vue';
import editList,{listPlus} from './edit'
const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const editList01=ref([])
const editForm=ref({
    birthday:'',
    radio1:'男',
    cities:'',
    skill:'上海',
    username:'132253_053u'
})
let dialogVisible=ref(false)
const resourceList=[
    {
        value:'上海',
        label:'上海'
    },
    {
        value:'北京',
        label:'北京'
    },
    {
        value:'深圳',
        label:'深圳'
    },
    {
        value:'广州',
        label:'广州'
    },
    {
        value:'重庆',
        label:'重庆'
    }

]
const load = () => {
  loading.value = true
//   console.log(111)
  setTimeout(() => {
    // count.value += 2
    editList01.value=editList.concat(listPlus)//模拟拉到底部后加载数据
    loading.value = false
  }, 1000)
}
onMounted(() => {
    editList01.value=editList
})
</script>

<style scoped lang="less">
    .mine-main-container{
        
        .tag-item{
            min-width: 100px;
            height: 40px;
            line-height: 38px;
            text-align: center;
            border-radius: 4px;
            border: 1px solid #eaecf0;
            color: #111;
            background-color: #fff;
            cursor: pointer;
            margin: 0 22px 21px 0;
            display: inline-block;
            font-size: 12px;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            .toggle-interest-icon{
                            cursor: pointer;
                            position: absolute;
                            width: 20px;
                            height: 20px;
                            top: -10px;
                            right: -10px;
                            background: #fff;
                        
                    }
            }

        .title{
            font-style: normal;
            font-size: 18px;
        }
        .title-memo{
            color: #b1b5c1;
            margin: 6px 0 0;
            font-size: 14px;
        }

    
    .choosed{
            margin-top: 30px;
        }
        .sub-title{
            margin: 8px 0 10px;
            color: #111;
            font-size: 14px;
        }
        .recommendList{
            height: 300px;
            overflow: hidden;
        }
            
        



        .short_toggle_container{
            vertical-align: middle;
        }
        .placeholder_state{
            height: 30px;
            line-height: 30px;
            width: 70px;
            padding: 0;
            margin: 0;
            background-color: #f5f7f9;
            color: #bbbfc9;
            border: none;
            text-align: center;
        }
        .level_box{
            box-sizing: border-box;
            background: linear-gradient(#ff289b,#ff43d0);
            border: 1px solid #fff;
            border-radius: 4px;
            padding: 0 8px;
            display: inline-block!important;
            line-height: 1.15;
            white-space: nowrap;
            cursor: pointer;
            .lv{
                width: 15px;
                height: 10px;
                background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                .i{
                width: 8px;
                height: 10px;
                display: inline-block;
                background-size: 100%;
                background-repeat: no-repeat;
            }
            }
           
        }
        .main-form{
            padding: 30px 140px;
        }
        .avatar-container{
            width: 120px;
            height: 120px;
            border-radius: 100%;
            margin: 26px auto 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            cursor: pointer;
        }
        .avatar-tip{
                 color: #7d8090;
                font-size: 14px;
                text-align: center;
                padding: 12px;
                margin: 0;
            }
        }
    

</style>